---
title: 移动端常见问题
date: 2023-01-22 20:10:43
images: ['https://img1.baidu.com/it/u=1769826650,2758462916&fm=253&fmt=auto&app=138&f=JPEG?w=891&h=500']
summary: '在前端开发过程中，移动端开发是一个非常常见的任务。然而，由于移动端设备的多样性和屏幕尺寸的不同，开发人员需要考虑到各种情况，以确保应用程序在不同的设备上都能正常运行。'
tags: 
 - web
---

以下是一些常见的移动端开发问题：

- 响应式设计：如何确保应用程序在不同的屏幕尺寸下都能良好地显示和交互？



#### 移动端
- h5底部输入框被键盘遮挡问题
  - 给body设置css属性：`overflow: hidden;`
  - 给body设置css属性：`padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);`
  - 
  ```javascript
    var getHeight = $(document).height();

    $(window).resize(function(){
     if($(document).height() < getHeight) {
      $('#footer').css('position','static');
     }else {
      $('#footer').css('position','absolute');
     }
    });

    ```
**弹窗时禁止背景滚动**
```javascript
export function stopBodyScroll(isFixed){
 let wrapper document.querySelector("#app");
 if (isFixed)
  const query= Taro.createSelectorQuery()
  query.select('#app').boundingclientRect(rec =>
  scrollTop= rec.top 
  // 在使用弹窗前记录当前位置，设置距离顶部的高度
  wrapper.style.position= "fixed";
  wrapper.style.top= scrollTop;
  wrapper.style.bottom =0;
  wrapper.style.left =0;
  wrapper.style.right=0;
  wrapper.style.overflow= "hidden";
  })exec()
 }else{
  wrapper.style.position= "static";
  wrapper.style.top ="unset";
  wrapper.style.bottom ="unset";
  wrapper.style.left ="unset";
  wrapper.style.right ="unset";
  wrapper.style.overflow ="auto";
  window.scrollTo(0,-scrollTop);
  // 重置属性，滑动到记录的参数位置
 }
}
```


#### taro弹窗组件列表排序

> 在taro 3.x版本的时候遇到过一个问题，就是在弹窗组件包裹一个下滑列表加载，在加载新数据的时候，会出现列表的排序错乱。解决问题的最简单方法就是在列表最外层加个&lt;view&gt;&lt;/view&gt;标签包裹。这个核react要一个最外层标签包裹是一样的，在算法diff的时候计算错误。
